<template>
  <div class='page-content'>
      <el-button type="primary" plain @click="showDialog('add')">新增</el-button>

    <el-table
      :data="userList"
      v-loading="loading"
      style="width: 100%">
           <el-table-column label="标题" prop="title"  align="center"
           width="500"
           show-overflow-tooltip/>
              <el-table-column label="创建时间" prop="createTime"  align="center"/>
              <el-table-column fixed="right" label="操作" width="380px" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" @click="showDialog('edit',scope)">
                    修改
                  </el-button>
                  <el-button type="info" @click="infoCarousel(scope)">
                    详情
                  </el-button>
<!--                  <el-button :type="scope.row.delFlag === 1? 'warning':'success'" @click="deleteUser(scope)">-->
<!--                    {{scope.row.delFlag === 1? '禁用' :'启用'}}-->
<!--                  </el-button>-->
                  <el-button type="danger" @click="dreleaseWorkTips(scope)">
                   删除
                  </el-button>
                </template>
              </el-table-column>
    </el-table>


    <EnteringForm ref="enteringForm"
                  :edit="edit"
                  v-bind="dialog"
                  :form="form"
                  :rules="rules"
                  @getList="getList"
                  @close="close"
                  @submit="submit"
                  labelWidth="120px"/>
    <!--    轮播图详情-->
    <el-dialog
      :visible.sync="dialogVisibleA"
      :show-close="false"

      width="75%">
      <div slot="title" class="title-wrapper">
        <div class="close-icon-wrapper" @click="dialogVisibleA = false">
          <i class="el-icon-arrow-left"></i>
        </div>
        <div class="title-text">
          {{ '公告详情' }}
        </div>
      </div>
      <div style="max-height: 550px;overflow-y: auto;">
        <el-form ref="formA" size="medium" :model="formA" label-width="120px">
          <el-row :gutter="15">
             <el-col :md="24" :sm="24">
                <el-form-item label="标题" prop="title" >
                  <el-input v-model="formA.title" disabled></el-input>
                </el-form-item>
              </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="内容" prop="" >
                <div  v-html="formA.content"></div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import EnteringForm from  '../announcement/EnteringForm.vue'
import {
  bannerDelete,
  announcementPage,
  getBannerDetail,
  announcementDelete,
  announcementDetail
} from '@/api/modular/system/loginManage'
export default {
  components: {EnteringForm},
  data() {
    return {
      loading: false,
      options:[
        {
          value:2,
          label:'链接'
        },
        {
          value:1,
          label:'富文本'
        }
      ],
      formA:{},
      dialogVisibleA:false,
      edit:'',
      dialogDetail:{
        visible:false,
        title: '添加'
      },
      dialog:{
        visible:false,
        title: '添加'
      },
      title:'',
      page: {
        pageNo: 1,
        pageSize: 10
      },
      dvEdit: false,
      dialogTitle: '',
      formDetail: {
        title: '',
        content: '',
      },
      form: {
        title: '',
        content: '',
      },
      value: '',
      userList: [],
      labels: {
        title: '标题',
        content: '内容',
      },
      columns: [
        {name: "轮播图", show: true},
        {name: "类型", show: true},
        {name: "创建时间", show: true},
        {name: "状态", show: true},
      ]
    };
  },
  computed: {
    rules() {
      const rules = {}
      Object.keys(this.form).forEach(key=> {
        rules[key] = [{
          required: true, message: `请输入${this.labels[key]}`,trigger: 'blur'
        }]
      })

      return rules

    },
  },
  created() {
    this.getList()
  },
  methods: {
    // 打开弹窗
    showDialog(type,scope) {
      this.dialog.visible = true
      if (type === 'add'){
        this.edit = ''
        this.dialog.title = '新增公告'
        this.form.image = ''
        this.form.type = ''
        this.form.content = ''
        this.form.sort = ''
      }else {
        this.dialog.title = '修改公告'
        this.edit = 'edit'
        console.log(this.$refs.enteringForm)

        this.form = scope.row
        // this.$refs.enteringForm.$refs.form.resetFields();
      //   announcementDetail({
      //     id:scope.row.id
      //   }).then(response =>{
      //     this.form = response.data
      //   })
      }
    },
    close() {
      this.dialog.visible = false
    },
    submit() {
      this.dialog.visible = false
    },
    // 分页
    // changePage(page){
    //   page.page? this.page.pageNo = page.page : this.page.pageSize = page.limit
    //   this.getList()
    // },
    // 获取列表
    getList(){
      this.loading = true;
      let query = {
        queryParam: {
          title:this.title
        },
        page: this.page
      }
      announcementPage({}).then(response =>{
        this.userList = response.data.rows
        // this.page.pageNo = response.data.pageNo
        // this.page.pageSize = response.data.pageSize
        // this.page.total = response.data.totalRows
      }).finally(() => {
        this.loading = false;
      });
    },
    // 取消
    // deleteUser(scope){
    //   changeBannerStatus({
    //       id:scope.row.id,
    //       delFlag:scope.row.delFlag === 1 ? 3:1
    //     }).then(response =>{
    //       this.$message.success('操作成功')
    //       this.getList()
    //     })
    // },
    // 详情
    infoCarousel(scope){
      this.dialogVisibleA = true
      this.formA = scope.row
      this.formA.content = this.formA.content.replace(/<img/g,"<img style='max-width:100%;height:auto;'");
    },
    // 删除
    dreleaseWorkTips(scope) {
      this.$confirm('确认删除当前内容吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        announcementDelete({
          id:scope.row.id,
          delFlag:2
        }).then(response =>{
          this.$message.success('删除成功')
          this.getList()
        })
      }).catch(() => {
      })
    },
    changeColumn(columns) {
      this.columns = columns
      this.$refs.table.doLayout()
    },
    cellStyle({ rowIndex}) {
      const style = {color:'#7E868B'}
      if(rowIndex%2===1) {
        Object.assign(style,{background:'#C2E4FF',})
      }
      return style
    },
  }
}
</script>

<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;

  .avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}
::v-deep .el-dialog__header {
  padding: 0 !important;
  height: 66px;
  background: linear-gradient(
      148deg,
      #3aa1fe 0%,
      #4679fe 28%,
      #3aa1fe 54%,
      #3aa1fe 79%,
      #1753e2 100%
  );
}

::v-deep .el-dialog__body {
  padding-top: 40px !important;
}

::v-deep .el-dialog__footer {
  padding: 0 0 30px !important;
  border: none !important;
}

.title-wrapper {
  position: relative;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;

  .close-icon-wrapper {
    position: absolute;
    left: 0;
    top: 0;

    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 66px;
    color: #fff;
    //font-size: $xxl-font-size;
    cursor: pointer;
  }

  .title-text {
    //font-size: $lg-font-size;
    color: #ffffff;
  }
}

.dialog-footer {
  display: flex;
  justify-content: center;

  .confirm-btn {
    margin-right: 118px;
    width: 150px;
    height: 42px;
    background: #3aa1fe;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }

  .cancel-btn {

    width: 150px;
    height: 42px;
    background: #9cafc6;
    border-radius: 4px 4px 4px 4px;
    color: #ffffff;
  }
}
.img {
  width: 100px;
  height: 100px;
  display: block;
}

</style>
